<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scaaa=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #btn {
            color: blue;
            font-size: 18px;

        }
        #btn1{
            width: 50px;
            height: 30px;
            font-size: 20px;
            position: absolute;
            bottom: 20px;
            right: 20px;
        }
        #contain {
            width: 600px;
            height: 400px;
            border: 1px solid blue;
            margin: 0 auto;
            position: absolute;
            left: 20%;
            top: 20%;
            background-color: pink;
        }

        .cent {
            width: 600px;
            height: 400px;
            background-color: #ccc;
            opacity: 0.8;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }

        #list div {
            height: 70px;
            width: 600px;
            background-color: #ccc;
            font-size: 40px;
            line-height: 70px;
            margin-top: 10px;
            color: chocolate;
            text-align: center;
        }
        .aaa {
            width: 250px;
            height: 150px;
            background: #888;
            position: absolute;
            left: 200px;
            bottom: 0;
            z-index: 2;
        }
        .aaa h2 {
            margin-left: 0px;
            line-height: 30px;
            background: pink;
            padding: 10px 0;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="contain">
        <button id="btn1">添加</button>
        <div id="list">
        </div>
        <div class="cent" style="display: none;"></div>
        <div class="aaa" style="display: none;">
            <h2>弹出窗口
                <input type="button" id="btn4" value="关闭">
            </h2>
            <textarea id="txt"></textarea>
            <input type="button" id="btn2" value="确定">
            <input type="button" id="btn3" value="取消">
        </div>
    </div>
</body>
<script>
    var ocon = document.getElementById("contain")
    var olist = document.getElementById("list")
    var ocent = document.querySelector(".cent");
    var otxt = document.getElementById("txt")
    var obtn1 = document.getElementById("btn1")
    var obtn2 = document.getElementById("btn2")
    var obtn3 = document.getElementById("btn3")
    var obtn4 = document.getElementById("btn4")
    var oaaa = document.querySelector(".aaa");
    var oh2 = document.querySelector(".aaa h2");
    var clientW = document.documentElement.clientWidth;
    var clientH = document.documentElement.clientHeight;

    obtn1.onclick = function () {

        oaaa.style.display = "";
        ocent.style.display = "";
    }
    obtn3.onclick = function () {
        oaaa.style.display = "none";
        ocent.style.display = "none";
    }
    obtn4.onclick = function () {
        oaaa.style.display = "none";
        ocent.style.display = "none";
    }
    obtn2.onclick = function () {
        oaaa.style.display = "none";
        ocent.style.display = "none";
        if (otxt.value === "") return;
        var div = document.createElement("div");
        div.innerHTML = otxt.value;
        olist.appendChild(div);
        otxt.value = "";
        omsg.scrollTop = omsg.scrollHeight;
    }
    oh2.onmousedown = function (eve) {
        var downE = eve || window.event;
        downE.preventDefault();
        document.onmousemove = function (eve) {
            var moveE = eve || window.event;
            var l = moveE.pageX - downE.offsetX;
            var t = moveE.pageY - downE.offsetY;
            if (l < 0) l = 0;
            if (t < 0) t = 0;
            if (l > clientW - oaaa.offsetWidth) l = clientW - oaaa.offsetWidth;
            if (t > clientH - oaaa.offsetHeight) t = clientH - oaaa.offsetHeight;
            oaaa.style.left = l + "px"
            oaaa.style.top = t + "px"
        }
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
</script>

</html>